@charset "utf-8";

body { background: #323B55; }
.login { width: 350px; position: absolute; top: 50%; left: 50%; margin-left: -175px; margin-top: -10%;
animation-name: myfirst;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-delay: .1s;
animation-iteration-count: 1;
animation-play-state: running;
}
.login div { margin: 15px 0; width: 100%; float: left; }
.login fieldset { background-color: #fff; border: none; border-radius: 8px; padding: 20px; box-shadow: 3px 3px 8px #363636; }
.login legend { float: left; width: 100%; margin-bottom: 10px; margin-left: -5px; font-size: 20px; letter-spacing: 1px; }
.login label { float: left; margin-top: 3.5%; }
.login input:not([type="submit"]) {float: right; width: 65%; margin-left: 10px; font-size: 15px; padding: 10px; padding-left: 15px; border-radius: 5px; border: 1px solid #bfbfbf; }
.login input[type="submit"] { border: none; background-image: -webkit-linear-gradient(bottom, #5466da 0%, #768ee4 100%); font-size: 18px; float: right; padding: 10px 20px; text-align: center; border-radius: 5px; width: 50%; }
.login input[type="submit"]:hover { box-shadow: 0 0 5px #000 inset; }
@keyframes myfirst
{
    from { top: 55%; opacity: 0; }
    to { top: 50%; opacity: 1; }
}
@media (max-width: 600px) {
.login { width: 96%;  margin: 0 2%;  position: relative; top: 100px; left: 0; }
.login div { margin: 15px 0; width: 90%; float: left; }
.login fieldset { border: none; box-shadow: none; background-color: inherit; }
.login legend { display: none; }
.login label { display: none; }
.login input:not([type="submit"]) { float: inherit; width: 100%; font-size: 15px; padding: 10px; padding-left: 15px; border-radius: 5px; border: 1px solid #bfbfbf; margin: 0; }
.login input[type="submit"] { border: none; background-image: -webkit-linear-gradient(bottom, #5466da 0%, #768ee4 100%); font-size: 18px; width: 90%; margin: 0 5%; padding: 10px 20px; text-align: center; border-radius: 5px; float: inherit; }
.login input[type="submit"]:hover { box-shadow: 0 0 5px #000 inset; }
}